<template>
  <el-dialog
      v-model="diaVisible"
      title="新增灯塔"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px"
      @close="resetForm"
  >
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item label="灯塔名称" prop="towername">
        <el-input v-model="ruleForm.towername" placeholder="请输入灯塔名称"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="ruleForm.sort" :precision="0" :step="1" :min="1" style="width: 100%" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="resetForm" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {insertNewTower} from "../../router/api.js";
import {mapGetters} from "vuex";

export default {
  name: "addHouse",
  computed: {
    ...mapGetters(['currentMenu']),
  },
  data(){
    return {
      diaVisible: false,
      ruleForm: {
        towername: '',
        sort: 0,
      },
      ruleFormClone: {},
      rules: {
        towername: [
          {required: true, message: '请输入实际灯名', trigger: 'blur'},
        ],
      },
      currentItem: {},
    }
  },
  created() {
    this.ruleFormClone = JSON.parse(JSON.stringify(this.ruleForm))
  },
  methods: {
    show() {
      this.diaVisible = true;
    },
    submitForm() {
      this.$refs['ruleFormRef'].validate(async (valid) => {
        if (valid) {
          let {towername} = this.ruleForm;
          insertNewTower({
            towername,
            towerArea: this.currentMenu
          }).then(res => {
            if (res.data.code == 200) {
              // this.$message.success(res.data.msg);
              this.resetForm();
              this.$emit('saveOk')
            } else {
              // this.$message.warning(res.data.msg)
            }
          })
        }
      });
    },
    resetForm() {
      this.diaVisible = false;
      this.ruleForm = this.ruleFormClone;
      this.$refs['ruleFormRef'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
